<template>
   <div class="news">
       <img src="@/assets/image/contact/news-bg.jpg" alt="">
       <div class="industry-news">
           <div class="line"></div>
           <p class="title">行业新闻</p>
           <p class="see-more">查看更多</p>
           <div class="news-content">
               <img class="news-icon" src="../../assets/image/contact/news-icon.png" alt="">
               <div class="news-item">
                   <li class="news-title">
                      金色摇篮携智慧系统亮相2019中国国际涂料展
                    </li>
                   <p class="news-time">2019-11-20 11:53:09</p>
               </div>
               <div class="news-item">
                   <li class="news-title">2019涂料工业大盘点及未来趋势</li>
                   <p class="news-time">2019-11-20 11:53:09</p>
               </div>
               <div class="news-item">
                   <li class="news-title">天津出台“十三五”VOCs减排方案 油性漆或再遭寒冬</li>
                   <p class="news-time">2019-11-20 11:53:09</p>
               </div>
           </div>
       </div>
       <div class="contact">
           <img  class="ap-bg" src="../../assets/image/contact/appointment-bg.jpg" alt="">
           <p class="ap-title">让我们与您联系</p>
           <p class="ap-detail">留下您的联系方式，我们的专业顾问<br/>会在一日内与您联系。</p>
           <div class="order-now">现在预约</div>
       </div>
   </div>
</template>

<script>
export default {
   name: '',
   data() {
       return {}
   },
  components: {}
}
</script>

<style scoped lang="less">
 .news{
     width: 100%;
     height: 7.4rem;
     position: relative;
     img{
         width: 100%;
         height: 100%;
     }
     .industry-news{
         width: 7rem;
         height: 4.07rem;
         background: white;
         position: absolute;
         top: 0.5rem;
         left: 50%;
         transform: translateX(-50%);
         .line{
             width: 0.02rem;
             height: 2.45rem;
             background-color:  #eaeaea;
             position: absolute;
             top: 1rem;
             left: 0.4rem;
         }
         .title{
             font-size: 0.28rem;
             position: absolute;
             top: 0.5rem;
             left: 0.5rem;
         }
         .see-more{
             font-size: 0.24rem;
             transform: scale(11/12);
             position: absolute;
             top: 0.55rem;
             right: 0.55rem;

         }
         .news-content{
             display: flex;
             height: 2.45rem;
             width: 5.4rem;
             flex-direction: column;
             position: absolute;
             top: 1.06rem;
             left: 0.36rem;
            .news-icon{
                width: 0.33rem;
                height: 0.22rem;
                position: absolute;
                top: 0.1rem;
                right: 0.2rem;
            }
        .news-item{
            position: relative;
            li::before {
            content: "•"; color: #d4aa58;
            display: inline-block; width: 1em;
            margin-left: -1em
            }
            .news-title{
             font-size: 0.24rem;
             transform: scale(11/12);
             color: #333333;
             white-space: nowrap;
            
         }
            .news-time{
                font-size: 0.24rem;
                transform: scale(1/2);
                color: #b1b1b1;
                transform-origin: 0 0;
                margin-left: 0.25rem;
               
            }
        }
        
        }
     }
     .contact{
         width: 7rem;
         height: 2.13rem;
         background: white;
         position: absolute;
         bottom: 0.5rem;
         left: 50%;
         transform: translateX(-50%);
         .ap-bg{
             width: 100%;
             height: 100%;
         }
         .ap-title{
             font-size: 0.32rem;
             color: #000;
             position: absolute;
             top: 0.5rem;
             left: 0.45rem;

         }
         .ap-detail{
             font-size: 0.24rem;
             transform: scale(11/12);
             transform-origin: 0 0;
             color: #777777;
             position: absolute;
             left: 0.43rem;
             bottom: 0.43rem;

         }
         .order-now{
             width: 1.75rem;
             height: 0.6rem;
             text-align: center;
             line-height: 0.6rem;
             font-size: 0.24rem;
             color: #ffffff;
             position: absolute;
             right: 0.35rem;
             bottom: 0.35rem;
             background: #d4aa58;
         }

     }
    
 }

</style>
